<template>
  <div class="content-my-exam">
    <!-- // 头部 -->
    <div class="header">
      <el-row class="left">
        <el-button
          type="primary"
          icon="el-icon-refresh-right"
          size="medium"
          @click="getTableData()"
          >刷新</el-button
        >
      </el-row>
      <div class="eleform">
        <el-date-picker
          class="el-data-pickers"
          v-model="stateTime"
          type="date"
          placeholder="考试开始时间"
        >
        </el-date-picker>
        <el-date-picker
          class="el-data-pickers1"
          v-model="endTime"
          type="date"
          placeholder="考试结束时间"
        >
        </el-date-picker>
        <el-button
          class="btn"
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="selectQuery"
          >搜索</el-button
        >
      </div>
      <div class="right">
        <el-input placeholder="请输入内容" v-model="input" clearable>
        </el-input>
        <el-button
          class="btn"
          type="primary"
          icon="el-icon-search"
          size="medium"
          @click="queryData()"
          >搜索</el-button
        >
      </div>
    </div>
    <!-- // 内容 -->
    <div class="content">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        height="100%"
        border
      >
        <el-table-column prop="id" label="序号"> </el-table-column>
        <el-table-column prop="examName" label="考试名称"> </el-table-column>
        <el-table-column prop="examJoinScore" label="总分数"> </el-table-column>
        <el-table-column prop="createName" label="创建人"> </el-table-column>
        <el-table-column prop="examTimeCost" label="时长"> </el-table-column>
        <el-table-column prop="examJoinDate" label="考试时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="medium"
              plain
              @click="handleEdit(scope.$index,scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- // 尾部 -->
    <div class="footer">
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-sizes="[1, 2, 3, 4]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import allApis from "@/request";
const {fetchMyExam,fetchDetails} = allApis
export default {
  name: "MyExam",
  data() {
    return {
      formInline: {
        user: "",
        region: "",
      },
      stateTime: "",
      endTime: "",
      input:'',
      // 是否显示查询框
      isSearch: false,
      search: "",
      dialogFormVisible: false,
      page: 1,
      pageSize: 100,
      val: "",
      val1: "",
      form: {
        time: "",
        date1: "",
        date2: "",
        examName: "",
      },
      tableData1: [],
      examDetails:[],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
    };
  },
  mounted() {
    this.getTableData();
  },
  methods: {
    selectQuery() {
      this.tableData1 = this.tableData;
      let start = moment(this.stateTime).format("YYYY-MM-DD");
      let end = moment(this.endTime).format("YYYY-MM-DD");
      let selectArr = this.tableData.filter((item)=>{
        return (
          // Date.parse(item.times)
          moment(item.times).isBetween(start, end,null,'[]')
        )
      })
      console.log(selectArr);
      this.$nextTick(() => {
          this.tableData = selectArr;
        });
      this.stateTime = ""; this.endTime = ""
    },
    /** 获取数据 */
    getTableData() {
      fetchMyExam({examJoinerId:'c9c6d20073b94f6c896f931dd3774cfa'}).then((res) => {
        console.log(res);
        if (res.data.code === 200) {
          this.tableData = res.data.data;
        }
      });
      if (this.tableData1 == "") {
        this.tableData = this.tableData;
      } else {
        this.$nextTick(() => {
          this.tableData = this.tableData1;
        });
      }
      console.log(this.tableData1);
    },

    // 模糊查询
    queryData() {
      this.tableData1 = this.tableData;
      const input = this.input;
      // const { time, date1, date2, examName } = form;
      // if (date1 !== "" || date2 !== "") {
      //   let start = moment(date1).format("YYYY-MM-DD HH:mm:ss");
      //   let end = moment(date2).format("YYYY-MM-DD HH:mm:ss");
      // }
      // console.log(date1, date2);
      // if (time === "" && date1 === "" && date2 === "" && examName === "") {
      // } else {
        const res = this.tableData.filter((item) => {
          return (
            item.examName.match(input)
            // item.time == time ||
            // moment(item.times).isBetween(date1, date2)
          );
        });
        this.$nextTick(() => {
          // dom元素更新后执行，因此这里能正确打印更改之后的值
          this.tableData = res; // 改变了的值
        });
      // }
    },

    async handleEdit(index,row) {
      // 点击详情按钮，跳转到详情页面
      fetchDetails({id:'c9c6d20073b94f6c896f931dd3774cfa',examId:row.examId}).then((res) => {
        console.log(res.data.data);
        if (res.data.code === 200) {
          this.$router.push({ name: "detail" ,
        params:{
            examDatils :res.data.data
        }
      });
        }
      });
      console.log(this.examDetails);
      // this.$router.push({name:"details",query:{res:res}});
      // const { data: res } = await request.post("", { id: row.id });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
  },
};
</script>

<style lang="scss" scoped>
.content-my-exam {
  width: 96%;
  margin: 0 auto;
  .header {
    height: 60px;
    position: relative;

    .left {
      position: absolute;
      left: 0px;
      top: 12px;
    }
    .eleform {
      position: absolute;
      left: 100px;
      top: 0px;
      width: 600px;
      height: 60px;
      .el-data-pickers {
        width: 200px;
        margin-top: 10px;
      }
      .el-data-pickers1 {
        width: 200px;
        margin-top: 10px;
        margin-left: 26px;
      }
      .btn {
        height: 40px;
        margin-top: 10px;
        margin-left: 0px;
      }
    }
    .right {
      position: absolute;
      right: 0px;
      top: 12px;
    }
  }

  .content {
    height: 87%;
    margin-top: 1%;
  }

  .footer {
    text-align: center;

    .block {
      margin-top: 1%;
    }
  }

  // 弹窗
  .el-input,
  .el-input__inner {
    width: 285px;
  }
  .line {
    text-align: center;
  }
  .ctrl-quit {
    margin-left: 48%;
  }
}
</style>
